<template>
  <div
    style="height: 100vh; width: 100%; display: flex; justify-content: center; align-items: center"
    class="login-bg"
  >
    <h1 style="color: #67c23a">正在登录中...</h1>
  </div>
</template>

<script lang="ts" setup>
import { useOidcStore } from '@/stores/oidc'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { ElLoading } from 'element-plus'

// 开始加载
const loading = ElLoading.service({
  lock: true,
  text: 'Loading',
  background: 'rgba(0, 0, 0, 0.7)'
})

let oidc = useOidcStore()
let router = useRouter()

oidc
  .signinRedirectCallbackAsync()
  .then(() => {
    ElMessage.success('登录成功')
    router.push('/').then((response) => {
      loading.close()
    })
  })
  .catch((error) => {
    // 登录错误，跳转 404
    console.log(error)
    loading.close()
    router.push('/404')
  })
</script>

<style scope>
.login-bg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  background: url(../../assets/img/login-bg.jpg) center/cover no-repeat;
}
</style>
